<!DOCTYPE HTML>
<html>
<head> 
    <title>首页</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <!--&lt;!&ndash;获得更好的响应式支持&ndash;&gt;-->
    <!--<meta name="viewport" content="width=device-width, initial-scale=1">-->
    <!-- 直接通过浏览器访问界面-->
    <!--引用vue.js-->
    <script type="text/javascript" src="./static/vue/vue.min.js"></script>
    <!--引用axios-->
    <script type="text/javascript" src="./static/axios/axios.min.js"></script>
    <!--引入element核心css样式-->
    <link rel="stylesheet" href="./static/element-ui/index.css">
    <!--引入element的js文件-->
    <script type="text/javascript" src="./static/element-ui/index.js"></script>

    <!-- 直接通过开发工具访问界面-->
     <!--<script type="text/javascript" src="../static/vue/vue.min.js"></script>
     &lt;!&ndash;引用axios&ndash;&gt;
     <script type="text/javascript" src="../static/axios/axios.min.js"></script>
     &lt;!&ndash;引入element核心css样式&ndash;&gt;
     <link rel="stylesheet" href="../static/element-ui/index.css">
     &lt;!&ndash;引入element的js文件&ndash;&gt;
     <script type="text/javascript" src="../static/element-ui/index.js"></script>-->

</head>
<div id="app">

        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <el-menu-item index="1">我的工作台</el-menu-item>
            <el-menu-item index="2" disabled>数据中心</el-menu-item>
            <el-menu-item index="3" disabled>消息中心</el-menu-item>
            <el-menu-item index="4"><a href="http://baidu.dbcndh.com/" target="_blank">百度</a></el-menu-item>
            <el-menu-item index="5"><a href="https://fanyi.baidu.com/translate?aldtype=16047&query=&keyfrom=baidu&smartresult=dict&lang=auto2zh#auto/zh/" target="_blank">百度翻译</a></el-menu-item>
        </el-menu>
        <!--处理中心界面-->
        <template>
            <span>

            </span>
            <el-row :gutter="20" style="margin-left:0px;margin-right: 0px;margin-top: 10px">
                <el-col :span="4">
                    <div style="line-height: 40px;">
                        已加载 <span>{{ loggingkaishi }}</span> 到 <span>{{ loggingjieshu }}</span>
                    </div>
                </el-col>
                <el-col :span="4">
                    地区
                    <el-select v-model="address" @change="handleAddressChange" clearable placeholder="请选择">
                        <el-option
                                v-for="item in addressList"
                                :key="item.value"
                                :label="item.key"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="4">
                    部门
                    <el-select v-model="dept" multiple placeholder="请选择">
                        <el-option
                                v-for="item in deptList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="search" icon="el-icon-search">搜索</el-button>
                </el-col>

                <el-col :span="4">
                    <el-button type="primary" @click="download" icon="el-icon-bottom">导出</el-button>
                </el-col>
            </el-row>
            <template>
                <el-tabs v-model="activeName" v-show="show" type="card" @tab-click="handleClick">
                    <el-tab-pane label="工资总表"  name="first">
                        <el-table :data="tableDataOne" style="width: 100%;">
                            <el-table-column fixed="left" width="80px" label="手动更新">
                                <el-table-column fixed="left" width="80px" label="工资周期">
                                    <el-table-column prop="k1" fixed="left" width="80px" label="序号"></el-table-column>
                                </el-table-column>
                            </el-table-column>
                            <el-table-column fixed="left" label="">
                                <el-table-column :label= loggingkaishi >
                                    <el-table-column width="110" prop="k2" label="姓名"></el-table-column>
                                </el-table-column>
                            </el-table-column>
                            <el-table-column fixed="left" label="">
                                <el-table-column :label= loggingjieshu >
                                    <el-table-column prop="k3" width="110" label="公司"></el-table-column>
                                </el-table-column>
                            </el-table-column>
                            <el-table-column fixed="left" label="">
                                <el-table-column label="本城市最低工资">
                                    <el-table-column prop="k4" width="120" label="一级部门"></el-table-column>
                                </el-table-column>
                            </el-table-column>
                            <el-table-column fixed="left" label="">
                                <el-table-column label= "2320" >
                                    <el-table-column prop="k5" width="110" label="二级部门"></el-table-column>
                                </el-table-column>
                            </el-table-column>
                            <el-table-column fixed="left" label="">
                                <el-table-column label= "2320" >
                                    <el-table-column prop="k6" width="110" label="二级部门"></el-table-column>
                                </el-table-column>
                            </el-table-column>
                            <el-table-column fixed label="">
                                <el-table-column label= "2320" >
                                    <el-table-column prop="k7" width="110" label="三级部门"></el-table-column>
                                </el-table-column>
                            </el-table-column>
                            <el-table-column fixed label="">
                                <el-table-column label= "2320" >
                                    <el-table-column prop="k8" width="110" label="职位"></el-table-column>
                                </el-table-column>
                            </el-table-column>
                            <el-table-column prop="k9" width="80"  label="身份证"></el-table-column>
                            <el-table-column prop="k10" width="80"  label="银行卡号"></el-table-column>
                            <el-table-column prop="k11" width="80"  label="开户行"></el-table-column>
                            <el-table-column prop="k12" width="80"  label="员工状态"></el-table-column>
                            <el-table-column prop="k13" width="80"  label="考核状态"></el-table-column>
                            <el-table-column prop="k14" width="80"  label="员工类型"></el-table-column>
                            <el-table-column prop="k15" width="80"  label="入职时间"></el-table-column>
                            <el-table-column prop="k16" width="120"  label="考核期通过日期"></el-table-column>
                            <el-table-column prop="k17" width="80"  label="离职日期"></el-table-column>
                            <el-table-column  label="基本工资">
                                <el-table-column prop="k18" width="110" label="基本工资标准"></el-table-column>
                                <el-table-column prop="k19" width="110" label="本月实发基本"></el-table-column>
                                <el-table-column prop="k20" width="110" label="底薪浮动差额"></el-table-column>
                            </el-table-column>
                            <el-table-column label="绩效工资">
                                <el-table-column prop="k21" width="110" label="绩效工资标准"></el-table-column>
                                <el-table-column prop="k22" width="110" label="本月实发绩效"></el-table-column>
                            </el-table-column>
                            <el-table-column prop="k23" width="80"  label="提成"></el-table-column>
                            <el-table-column prop="k24" width="80"  label="奖金"></el-table-column>
                            <el-table-column prop="k25" width="100"  label="社保差额调整"></el-table-column>
                            <el-table-column prop="k26" width="100"  label="其他税前项"></el-table-column>
                            <el-table-column prop="k27" width="80"  label="退费"></el-table-column>
                            <el-table-column prop="k28" width="110"  label="资源扣罚项（奖惩项）"></el-table-column>
                            <el-table-column label="考勤部分">
                                <el-table-column prop="province" width="110" label="月计薪天数"></el-table-column>
                                <el-table-column label="迟到">
                                    <el-table-column prop="k29" width="110" label="原始次数"></el-table-column>
                                    <el-table-column prop="k30" width="110" label="免责后次数"></el-table-column>
                                    <el-table-column prop="k31" width="110" label="金额"></el-table-column>
                                </el-table-column>
                                <el-table-column label="入离职缺勤部分">
                                    <el-table-column prop="k32" width="110" label="天数"></el-table-column>
                                    <el-table-column prop="k33" width="110" label="金额"></el-table-column>
                                </el-table-column>
                                <el-table-column label="事假扣款">
                                    <el-table-column prop="k34" width="110" label="天数"></el-table-column>
                                    <el-table-column prop="k35" width="110" label="金额"></el-table-column>
                                </el-table-column>
                                <el-table-column label="旷工扣款">
                                    <el-table-column prop="k36" width="110" label="天数"></el-table-column>
                                    <el-table-column prop="k37" width="110" label="金额"></el-table-column>
                                </el-table-column>
                                <el-table-column label="病假扣款">
                                    <el-table-column prop="k38" width="110" label="天数"></el-table-column>
                                    <el-table-column prop="k39" width="110" label="金额"></el-table-column>
                                </el-table-column>
                                <el-table-column prop="k40" width="110" label="考勤扣款小计"></el-table-column>
                            </el-table-column>
                            <el-table-column prop="k41" width="110"  label="应付工资"></el-table-column>
                        </el-table>
                    </el-tab-pane>

                    <el-tab-pane label="大区—团队管理者" name="second">
                        <el-table :data="tableDataOne" style="width: 100%;">
                            <el-table-column prop="m1" width="80" fixed="left"   label="序号"></el-table-column>
                            <el-table-column prop="m2" width="80" fixed="left"   label="姓名"></el-table-column>
                            <el-table-column prop="m3" width="100" fixed="left"   label="分公司级别"></el-table-column>
                            <el-table-column prop="m4" width="80" fixed="left"   label="公司"></el-table-column>
                            <el-table-column prop="m5" width="80" fixed="left"   label="部门"></el-table-column>
                            <el-table-column prop="m6" width="80" fixed="left"   label="组别"></el-table-column>
                            <el-table-column prop="m7" width="80" fixed="left"   label="岗位类别"></el-table-column>
                            <el-table-column prop="m8" width="120"  label="入职时间"></el-table-column>
                            <el-table-column prop="m9" width="120"  label="考核期通过日期"></el-table-column>
                            <el-table-column prop="m10" width="120"  label="离职时间"></el-table-column>
                            <el-table-column prop="m11" width="80"  label="员工状态"></el-table-column>
                            <el-table-column prop="m12" width="120"  label="基本工资标准"></el-table-column>
                            <el-table-column prop="m13" width="120"  label="绩效工资标准"></el-table-column>
                            <el-table-column prop="m14" width="120"  label="年度团队任务量"></el-table-column>
                            <el-table-column prop="m15" width="80"  label="考核月份"></el-table-column>
                            <el-table-column prop="m16" width="120"  label="月度团队任务量"></el-table-column>

                            <el-table-column label="新签业绩">
                                <el-table-column prop="m17" width="80" label="新签业绩"></el-table-column>
                                <el-table-column prop="m18" width="80" label="非美签约"></el-table-column>
                                <el-table-column prop="m19" width="80" label="培训签约"></el-table-column>
                                <el-table-column prop="m20" width="80" label="项目签约"></el-table-column>
                                <el-table-column label="作品集">
                                    <el-table-column prop="m21" width="140" label="作品集-留学-签约"></el-table-column>
                                    <el-table-column prop="m22" width="140" label="作品集-培训-签约"></el-table-column>
                                    <el-table-column prop="m23" width="140" label="作品集-产品-签约"></el-table-column>
                                </el-table-column>
                                <el-table-column label="日本">
                                    <el-table-column prop="m24" width="130" label="日本-留学-签约"></el-table-column>
                                    <el-table-column prop="m25" width="130" label="日本-培训-签约"></el-table-column>
                                    <el-table-column prop="m26" width="130" label="日本-产品-签约"></el-table-column>
                                </el-table-column>
                                <el-table-column prop="m27" width="110" label="移民签约"></el-table-column>
                                <el-table-column prop="m28" width="150" label="菁英规划签约*20%"></el-table-column>
                                <el-table-column prop="m29" width="110" label="产品保录签约"></el-table-column>
                                <el-table-column prop="m30" width="110" label="新签小计"></el-table-column>
                            </el-table-column>
                            <el-table-column prop="m31" width="100"  label="新签完成率"></el-table-column>

                            <el-table-column label="退费金额">
                                <el-table-column prop="m32" width="110" label="美国退费"></el-table-column>
                                <el-table-column prop="m33" width="110" label="非美退费"></el-table-column>
                                <el-table-column prop="m34" width="110" label="培训退费"></el-table-column>
                                <el-table-column prop="m35" width="110" label="项目退费"></el-table-column>
                                <el-table-column label="作品集">
                                    <el-table-column prop="m36" width="140" label="作品集-留学-退费"></el-table-column>
                                    <el-table-column prop="m37" width="140" label="作品集-培训-退费"></el-table-column>
                                    <el-table-column prop="m38" width="140" label="作品集-产品-退费"></el-table-column>
                                </el-table-column>
                                <el-table-column label="日本">
                                    <el-table-column prop="m39" width="130" label="日本-留学-退费"></el-table-column>
                                    <el-table-column prop="m40" width="130" label="日本-培训-退费"></el-table-column>
                                    <el-table-column prop="m41" width="130" label="日本-产品-退费"></el-table-column>
                                </el-table-column>
                                <el-table-column prop="m42" width="80" label="移民退费"></el-table-column>
                                <el-table-column prop="m43" width="150" label="菁英规划退费*20%"></el-table-column>
                                <el-table-column prop="m44" width="150" label="产品保录-退费"></el-table-column>
                                <el-table-column prop="m45" width="80" label="退费小计"></el-table-column>
                            </el-table-column>

                            <el-table-column label="">
                                <el-table-column prop="m46" width="110" label="团队净业绩"></el-table-column>
                                <el-table-column prop="m47" width="150" label="团队净业绩完成率"></el-table-column>
                                <el-table-column prop="m48" width="110" label="1.业绩绩效"></el-table-column>
                                <el-table-column prop="m49" width="150" label="当月新签客户人数"></el-table-column>
                                <el-table-column prop="m50" width="120" label="当月有效资源量"></el-table-column>
                                <el-table-column prop="m51" width="165" label="非口碑有效资源转化率（已过考核期）"></el-table-column>
                                <el-table-column prop="m52" width="130" label="2.非口碑新签绩效"></el-table-column>
                                <el-table-column prop="m53" width="140" label="团队搭建完成率（考核期）"></el-table-column>
                                <el-table-column prop="m54" width="120" label="3.团队搭建绩效"></el-table-column>
                                <el-table-column prop="m55" width="140" label="月度实发绩效合计"></el-table-column>
                                <el-table-column label="团队提成">
                                    <el-table-column prop="m56" width="130" label="个人留学净业绩"></el-table-column>
                                    <el-table-column prop="m57" width="130" label="团队留学净业绩"></el-table-column>
                                    <el-table-column prop="m58" width="120" label="团队提成基数"></el-table-column>
                                    <el-table-column prop="m59" width="120" label="团队提成金额"></el-table-column>
                                </el-table-column>
                                <el-table-column prop="m60" width="120" label="季度奖励合计"></el-table-column>
                                <el-table-column prop="m61" width="120" label="本月奖金合计"></el-table-column>
                                <el-table-column prop="m62" width="80" label="备注"></el-table-column>
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>

                    <el-tab-pane label="工作量汇总" name="third">
                        <el-table :data="tableDataOne" style="width: 100%;">
                            <el-table-column prop="r1" width="80" fixed="left" label="月份"></el-table-column>
                            <el-table-column prop="r2" width="80" label="公司"></el-table-column>
                            <el-table-column prop="r3" width="100" label="合同号"></el-table-column>
                            <el-table-column prop="r4" width="80" label="学员姓名"></el-table-column>
                            <el-table-column prop="r5" width="120" label="合同名称（套餐/服务名称）"></el-table-column>
                            <el-table-column prop="r6" width="80" label="服务明细"></el-table-column>
                            <el-table-column prop="r7" width="120" label="实际收款日期"></el-table-column>
                            <el-table-column prop="r8" width="120" label="实际收款金额"></el-table-column>
                            <el-table-column prop="r9" width="120" label="计入业绩金额"></el-table-column>
                            <el-table-column prop="r10" width="80" label="签约国家"></el-table-column>
                            <el-table-column prop="r11" width="80" label="咨询顾问"></el-table-column>
                            <el-table-column prop="r12" width="140" label="助签顾问（两人及以上合签时填写）"></el-table-column>
                            <el-table-column prop="r13" width="120" label="语培促签顾问"></el-table-column>
                            <el-table-column prop="r14" width="120" label="BE促签顾问"></el-table-column>
                            <el-table-column prop="r15" width="80" label="提报类别"></el-table-column>
                            <el-table-column prop="r16" width="120" label="提成人员姓名"></el-table-column>
                            <el-table-column prop="r17" width="80" label="是否合签"></el-table-column>
                            <el-table-column prop="r18" width="110" label="合签业绩比例"></el-table-column>
                            <el-table-column prop="r19" width="80" label="提成金额"></el-table-column>
                            <el-table-column prop="r20" width="80" label="岗位类型"></el-table-column>
                            <el-table-column prop="r21" width="80" label="提报类型"></el-table-column>
                            <el-table-column prop="r22" width="90" label="提点/级别"></el-table-column>
                            <el-table-column prop="r23" width="80" label="提成合计"></el-table-column>
                            <el-table-column prop="r24" width="80" label="备注"></el-table-column>
                        </el-table>
                    </el-tab-pane>

                    <el-tab-pane label="当月退费—财务提供" name="four">
                        <el-table :data="tableDataOne" style="width: 100%;">
                            <el-table-column prop="p1" width="80" fixed="left" label="序号"></el-table-column>
                            <el-table-column prop="p2" width="80" label="学生姓名"></el-table-column>
                            <el-table-column prop="p3" width="100" label="分公司"></el-table-column>
                            <el-table-column prop="p4" width="80" label="退费月份"></el-table-column>
                            <el-table-column prop="p5" width="120" label="签约顾问"></el-table-column>
                            <el-table-column prop="p6" width="80" label="合同编号"></el-table-column>
                            <el-table-column prop="p7" width="120" label="办理项目"></el-table-column>
                            <el-table-column prop="p8" width="120" label="退费金额"></el-table-column>
                            <el-table-column prop="p9" width="120" label="提成基数"></el-table-column>
                            <el-table-column prop="p10" width="80" label="提成发放人员"></el-table-column>
                            <el-table-column prop="p11" width="80" label="岗位"></el-table-column>
                            <el-table-column prop="p12" width="140" label="在职情况"></el-table-column>
                            <el-table-column prop="p13" width="120" label="提点"></el-table-column>
                            <el-table-column prop="p14" width="120" label="提成发放金额"></el-table-column>
                            <el-table-column prop="p15" width="80" label="提成发放月份"></el-table-column>
                            <el-table-column prop="p16" width="120" label="应退回金额"></el-table-column>
                            <el-table-column prop="p17" width="80" label="实际退回金额"></el-table-column>
                            <el-table-column prop="p18" width="110" label="备注"></el-table-column>
                            <el-table-column prop="p19" width="80" label="岗位-二级部门"></el-table-column>
                        </el-table>
                    </el-tab-pane>
                </el-tabs>
            </template>
            <div class="block">
                <span class="demonstration">直接前往</span>
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page.sync="currentPage"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="10"
                        layout="sizes, prev, pager, next"
                        :total=total>
                </el-pagination>
            </div>
        </template>
</div>
</html>
<script>

    var app = new Vue({
        el: "#app",
        data: {
            //这是用户的json对象
            user: {},
            //登陆中的用户
            loggingkaishi: "2020/09/01",
            loggingjieshu: "2020/09/30",
            activeName: 'first',
            activeIndex: '1',
            show: true,
            addressList: [],
            deptList: [],
            address: '',
            dept: [],
            tableDataOne: [],
            currentPage: 1,
            conditionList: [],
            page: 1,
            pagesize: 10,
            total:0,
            tabName: 'first',
            tableData: []
        },
        methods: {
            handleAddressChange: function (val) {
                const that = this;
                that.deptList = []
                this.dept = []
                const conditionList = this.conditionList;
                const list = conditionList.filter(e => e.key === val)[0].valueList;
                let deptListA = list.map((key)=>{
                    const item = {
                        "value": key,
                        "label": key
                    }
                    return item;
                })
                that.deptList = deptListA;
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pagesize = val
                this.queryMessage();
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.page = val
                this.queryMessage();
            },
            handleClick(tab, event) {
                this.tabName = tab.name
                this.page = 1
                this.pagesize = 10
                this.queryMessage();
            },
            queryMessage () {
                this.deptList = []
                this.dept = []
                this.address = ''
                this.addressList = []
                // 去请求后端接口
                this.search ()
            },
            // 工作台的切换
            handleSelect(key, keyPath) {
                if (key === "1") {
                    this.show = true
                }
                if (key === "2") {
                    this.show = false
                }
            },
            download () {
                const that = this;
                let data = {
                    address: that.address,
                    dept: that.dept.toString(),
                    beginTime: that.loggingkaishi,
                    endTime: that.loggingjieshu
                }
                axios.get(location.origin+"/study/user/download",
                    { params: data },
                    {
                        responseType: 'blob',
                    }
                ).then(function (response) {
                        console.log("response: ", response);
                        /*var blob = new Blob([res.data],{type: 'vnd.ms-excel;charset=utf-8'})
                        var downloadElement = document.createElement('a');
                        var href = window.URL.createObjectURL(blob); //创建下载的链接
                        downloadElement.href = href;
                        let timestamp=new Date().getTime();
                        downloadElement.download = timestamp+".xlsx"; //下载后文件名
                        document.body.appendChild(downloadElement);
                        downloadElement.click(); //点击下载
                        document.body.removeChild(downloadElement); //下载完成移除元素
                        window.URL.revokeObjectURL(href); //释放掉blob对象*/
                        const link = document.createElement('a');
                        let blob = new Blob([response.data], {type: 'application/vnd.ms-excel'});
                        link.style.display = 'none';
                        link.href = URL.createObjectURL(blob);//创建url对象
                        link.download = response.headers['content-disposition'].substr(20); //下载后文件名
                        document.body.appendChild(link);
                        link.click();
                        document.body.removeChild(link);
                        URL.revokeObjectURL(link.href);
                    }
                )
            },
            search () {
                const that = this;
                axios.post(location.origin+"/study/user/listDemo", {
                    address: this.address,
                    dept: this.dept.toString(),
                    page: this.page,
                    pagesize: this.pagesize,
                    tabName:this.tabName
                }).then(function (res) {
                        that.tableDataOne = res.data.listContent;
                        that.addressList = res.data.listAddressList;
                        that.conditionList = res.data.listCondition;
                        that.total = res.data.total;
                    }
                )
            },
            //退出登陆
            logout() {
                console.log("--------created")
                localStorage.removeItem("user");
                location.reload();
                alert("已经退出登陆");
                //退出登陆时应该返回登陆页面
                location.href="login.html";
            }
        },
        created() {
            const  that = this;
            axios.post(location.origin+"/study/user/listDemo", {
                address: this.address,
                dept: this.dept.toString(),
                page: this.page,
                pagesize: this.pagesize,
                tabName:this.tabName
            }).then(function (res) {
                    that.tableDataOne = res.data.listContent;
                    that.addressList = res.data.listAddressList;
                    that.conditionList = res.data.listCondition;
                    that.total = res.data.total;
                    console.log("=========初始化的时候========="+that.tableDataOne);
                 }
            )
        }
    })

</script>
<style type="text/css" scoped="scoped">
    .el-table__fixed{
        background-color: #f5f7fa;
    }
    .el-table th.is-hidden>*,.el-table td.is-hidden>* {
        visibility: visible
    }
    .el-row {
        margin-bottom: 20px;
        &:last-child {
             margin-bottom: 0;
        }
    }
    .el-col {
        border-radius: 4px;
    }
    .bg-purple-dark {
        background: #99a9bf;
    }
    .bg-purple {
        background: #d3dce6;
    }
    .bg-purple-light {
        background: #e5e9f2;
    }
    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }
    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }
</style>